<!-- components/TeacherSidebar.vue -->
<template>
  <div class="sidebar-menu">
    <el-menu
        :default-active="props.activeMenu"
        class="el-menu-vertical"
        @select="handleSelect"
    >
      <el-menu-item index="personalInfo">
        <el-icon><User /></el-icon>
        <span>个人信息</span>
      </el-menu-item>
      <el-menu-item index="accountSettings">
        <el-icon><Setting /></el-icon>
        <span>账号设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { User, Setting } from '@element-plus/icons-vue'

const props = defineProps<{
  activeMenu: string
}>()

const emit = defineEmits<{
  (e: 'menu-change', menuKey: string): void
}>()

const handleSelect = (index: string) => {
  emit('menu-change', index)
}
</script>

<style scoped>
.sidebar-menu {
  width: 200px;
  background: #fff;
  border-radius: 8px;
  padding: 10px 0;
}

.el-menu-vertical {
  border: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin: 4px 8px;
  border-radius: 4px;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff;
  color: #409EFF;
}
</style>
